<template>
	<view class="container">
		<view class="nav-item">
			<view class="nav-title">推广链接</view>
			<view class="nav-content">
				<view class="nav-content-input">
					<text class="text">长链接</text>
					<u--input
					    placeholder="请输入内容"
					    border="surround"
					    v-model="form.value1"
					  ></u--input>
					  <u-button text="复制" @click="copy(form.value1)"></u-button>
				</view>
				<view class="nav-content-input">
					<text class="text">短链接</text>
					<u--input
					    placeholder="请输入内容"
					    border="surround"
					    v-model="form.value2"
					  ></u--input>
					  <u-button text="复制"></u-button>
				</view>
			</view>
		</view>
		
		<view class="nav-item">
			<view class="nav-title">小程序</view>
			<view class="nav-content">
				<view class="nav-content-input">
					<text class="text">appid</text>
					<u--input
					    placeholder="请输入内容"
					    border="surround"
					    v-model="form.value3"
					  ></u--input>
					  <u-button text="复制"></u-button>
				</view>
				<view class="nav-content-input">
					<text class="text">path</text>
					<u--input
					    placeholder="请输入内容"
					    border="surround"
					    v-model="form.value4"
					  ></u--input>
					  <u-button text="复制"></u-button>
				</view>
				<view class="nav-content-input">
					<text class="text">小程序码</text>
					<u--input
					    placeholder="请输入内容"
					    border="surround"
					    v-model="form.value5"
					  ></u--input>
					  <u-button text="复制"></u-button>
				</view>
				<view class="procedure">
					<u-button type="primary" :plain="true" :hairline="true" text="直达活动页面"></u-button>
					<u-button type="primary" :plain="true" :hairline="true" text="分享海报"></u-button>
					<u-button type="primary" :plain="true" :hairline="true" text="保存小程序码"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				form: {
					value1: '',
					value2: '',
					value3: '',
					value4: '',
					value5: '',
				},
				value1: ""
			}
		},
		methods: {
			copy(value){
				uni.setClipboardData({
					data: value,
					success: () => {
						uni.showToast({
							title:'复制成功',
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding-bottom: 50rpx;
		font-size: 26rpx;
	}
	.nav-title{
		text-align: center;
		margin: 50rpx;
		color: #ff842c;
	}
	.nav-content-input{
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		font-size: 34rpx;
		border-bottom: 1px solid #ddd;
		&:last-child{
			border: none;
		}
		text{
			display: block;
			width: 140rpx;
		}
		/deep/ .u-button{
			width: 120rpx !important;
			font-size: 32rpx !important;
		}
		/deep/ .u-input{
			flex: 1;
			margin-right: 10rpx;
		}
	}
	
	.procedure{
		width: 60%;
		margin: 30rpx auto;
		/deep/ .u-button{
			margin-top: 20rpx;
		}
	}
</style>